<template>
  <section>
    <van-sticky>
      <PageHeader title="管理员"/>
    </van-sticky>

    <div class="pd10">
      <van-button type="primary" class="w100" @click="$router.push({name: 'AdminAdd'})">+添加</van-button>
    </div>

    <van-list
      class="mt10"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="requestData">
      <van-row class="list-item bg-color-white">
        <van-col :span="5" class="pl10 text-left strong">用户名</van-col>
        <van-col :span="5" class="pl10 text-left strong">姓名</van-col>
        <van-col :span="5" class="pl10 text-left strong">手机号</van-col>
        <van-col :span="3" class="pl10 text-left">锁定</van-col>
        <van-col :span="6" class="pr10 text-right strong">操作</van-col>
      </van-row>

      <van-row v-for="(item, index) in dataList" :key="index" class="list-item bg-color-white">
        <van-col :span="5" class="pl10 text-left">{{item.username}}</van-col>
        <van-col :span="5" class="pl10 text-left">{{item.real_name}}</van-col>
        <van-col :span="5" class="pl10 text-left">{{item.mobile}}</van-col>
        <van-col :span="3" class="pl10 text-left">{{item.is_locked == 1 ? 'Y' : 'N'}}</van-col>
        <van-col :span="6" class="pr10 text-right">
          <van-icon name="edit" @click="$router.push({name: 'AdminEdit', params: {id: item.id}})" />
          <van-icon name="delete" class="ml10" @click="lock(index)" />
        </van-col>
      </van-row>
    </van-list>
  </section>
</template>

<script>
import PageHeader from "../componets/PageHeader";
import {adminListsUri, adminLockUri, adminUnlockUri, roleDeleteUri} from "../../common/api";
import Vue from 'vue';
import {Toast, Dialog} from 'vant';
Vue.use(Toast).use(Dialog);

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: []
    }
  },
  methods: {
    lock(index) {
      const item = this.dataList[index];
      const that = this;
      let url = adminLockUri;
      if(item.is_locked == 1) {
        url = adminUnlockUri;
      }
      that.$http.get(url + '?id=' + item.id).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          Toast.fail(msg);
        } else {
          item.is_locked = item.is_locked == 1 ? 0 : 1;
          that.$set(that.dataList, index, item);
        }
      }, response => {
        // error callback
      })
    },
    requestData() {
      const that = this;
      this.loading = true;
      const url = adminListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          Toast.fail(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {

  }
}
</script>

<style scoped>

</style>
